<template>
  <PageWrapper :dense="true" :contentFullHeight="true">
    <template #headerContent>
      <Row>
        <Col
          :span="24"
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
          style="display: flex; justify-content: flex-end"
        >
          <Space>
            <InputSearch
              :placeholder="t('routes.demo.workFlow.searchFlowComponent')"
              style="width: 200px"
            />
            <a-button type="primary" preIcon="ion:add-outline">
              {{ t('routes.demo.workFlow.newFlowCom') }}
            </a-button>
          </Space>
        </Col>
      </Row>
      <BasicTable @register="registerTable">
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: t('common.edit'),
                icon: 'ic:outline-edit',
                onClick: handleEdit.bind(null, record),
                // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
              },
              {
                label: t('common.delete'),
                icon: 'ic:outline-delete-outline',
                onClick: handleDelete.bind(null, record),
                // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
              },
            ]"
          />
        </template>
      </BasicTable>
    </template>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '/@/components/Page';
  import { Row, Col, Space, InputSearch } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getFlowComponentColumns } from './flowData';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const [registerTable] = useTable({
    columns: getFlowComponentColumns(),
    rowKey: 'id',
    bordered: true,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 12, pageSizeOptions: ['12', '24', '36', '48'], defaultPageSize: 12 },
    actionColumn: {
      width: 300,
      fixed: 'right',
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 操作点击事件
  const handleEdit = (record: Recordable) => {
    console.log('点击了修改', record);
  };
  const handleDelete = (record: Recordable) => {
    console.log('点击了删除', record);
  };
</script>
